<template>
	<view :style="{'background-color': 'rgba('+ScriptInfoData.rgb_color+',0.8)'}" style="min-height: 100vh;height: auto;">
		<cu-custom :isBack="true" :bgColor="''" :backColor="'text-white'">
			<block slot="backText">
				<view :class="{'text-white':ScriptInfoData==''?false:true,'text-black':ScriptInfoData==''?true:false}">
					{{ScriptInfoData==''?'加载中...':ScriptInfoData.name}}
				</view>
			</block>
		</cu-custom>

		<view v-if="ScriptInfoData == ''" style="background-color: #fff;height: 100vh;">
			<van-skeleton title avatar avatar-size="120px" row="3" avatar-shape="square" />
			<van-skeleton row="20" />
		</view>
		<view v-else class="padding-bottom-xl" style="height: auto;">
			<view class="cu-card article text-white" >
				<view class="shadow padding-sm">
					<view class="flex justify-start padding-xs shadow-warp radius12" style="background-color: rgba(255,255,255,0.2);">
						<image :src="$isHttp(ScriptInfoData.picture)" class="radius12" style="width: 220rpx;height: 300rpx;"
							mode="aspectFill">
						</image>
						<view class="desc margin-left-sm" style="width: 470rpx;">
							<view class="flex justify-start margin-top-xs">
								<view class="text-bold text-white">{{ScriptInfoData.name}}</view>
								<!-- <view class="cu-tag bg-yellow  sm round margin-left-sm">标签666</view> -->
							</view>
							<view class="margin-top-sm text-sm">
								人数：<text>{{ScriptInfoData.sex_type}}</text>
							</view>
							<!-- <view class="margin-top-xs text-sm">
								价格：93元/位
							</view> -->
							<view class="margin-top-xs text-sm">
								类型：<text class="cu-tag bg-grey sm" v-for="(item,index) in ScriptInfoData.smallClasses"
									:key="index">{{item.small_name}}</text>
							</view>
							<view class="margin-top-xs text-sm">
								发行：{{ScriptInfoData.issue_name}}
							</view>
							<view class="margin-top-xs text-sm flex justify-between" v-if="ScriptInfoData.playedStatus==0">
								<view class="cu-tag bg-grey"
									:class="{'text-yellow':ScriptInfoData.wantStatus==0?false:true}" @click="addWantPlay">
									<text class="cuIcon-favorfill"></text>想玩
								</view>
								<view class="cu-tag bg-grey"
									:class="{'text-yellow':ScriptInfoData.playedStatus==0?false:true}"
									@click="playShow=true">
									<text class="cuIcon-favorfill"></text>玩过
								</view>
							</view>
							<view class="margin-top-sm text-sm flex justify-start align-center"
								v-if="ScriptInfoData.playedStatus!=0">
								<view class="cu-avatar sm round"
									:style="{'background-image': 'url('+vuex_user.avatarUrl+')'}"></view>
								<text class="margin-lr-sm">我评{{ScriptInfoData.score}}分</text>
								<van-rate :value="ScriptInfoData.score/2" readonly :size="15" allow-half color="#efc429"
									void-color="#eee" void-icon="star" />
							</view>
						</view>
					</view>
				</view>
			</view>

			<van-popup :show="playShow" round @click-overlay="clickOverlay">
				<view class="text-center padding-tb-xl padding-lr-xl" style="width: 500rpx;height: 400rpx;">
					<view>{{score*2}}分</view>
					<van-rate :value="score" :size="25" allow-half color="#efc429" void-color="#eee" void-icon="star"
						@change="scoreOnChange" />
					<view style="height: 120rpx;"></view>
					<van-button color="#efc429" block round size="small" @click="submitPlayed">提交</van-button>
				</view>
			</van-popup>

			<view class="padding-sm margin-lr-sm text-white radius12" style="background-color: rgba(255,255,255,0.2);">
				<view class="flex justify-between">
					<view class="">
						<view>
							<text class="cuIcon-favorfill text-yellow"></text><text>实时口碑</text>
						</view>
						<view class="text-yellow text-xxl text-bold text-center">{{ScriptInfoData.averageScore}}</view>
						<view class="text-center">{{ScriptInfoData.count_played}}人评</view>
					</view>
					<view>
						<view>{{ScriptInfoData.count_want}}人想玩 {{ScriptInfoData.count_played}}人玩过</view>
						<view></view>
					</view>
				</view>
			</view>

			<button @click="getBefore" class="round text-white margin-sm text-df" v-if="allowAppointment==0?false:true"
				:style="'background-color: rgba('+ScriptInfoData.rgb_color+',0.5);'">预约该剧本</button>

			<view class="margin-sm text-white">
				<view class="flex justify-between margin-bottom-sm text-bold text-lg">
					<view>剧本简介</view>
					<!-- <view>评论<text class="test-sm">2503</text></view> -->
				</view>
				<view style="line-height: 46rpx;" class="" :class="{expand:isExpand,noexpand:!isExpand}">
					预计时长：【{{ScriptInfoData.hour}}小时+】<br>
					{{ScriptInfoData.desc}}
				</view>
				<view @click="isExpand=!isExpand" class="text-center text-gray ">
					{{isExpand?'收起':'展开'}}
				</view>

				<!-- <five-mul-commentlist :faClass="'radius'" :commentList="commentList" @clickPraise="clickPraiseComment"
					@clickDelete="clickDeleteComment" @clickDeleteChild="clickDeleteCommentChild"
					@clickRecomment="clickRecomment" @clickRecommentChild="clickRecommentChild"></five-mul-commentlist>


				<five-comment ref="detailComment" @sendComment="sendComment" :placeholder="placeholder"></five-comment> -->
			</view>

			<view class="margin-sm text-white dm" v-if="ScriptRole.length>0">
				<view class="margin-bottom-sm text-bold text-lg">
					剧本角色
				</view>
				<scroll-view class="scroll-view_H" scroll-x="true" scroll-left="0">
					<view @click="showModal1(index)" data-target="Image" v-for="(item,index) in ScriptRole" :key="index"
						class="cu-card dm-item scroll-view-item_H radius">
						<image class="radius" :src="$isHttp(item.picture)" mode="aspectFill">
						</image>
						<view class=" text-center">
							<!-- <view class="tj1 cu-tag radius sm text-white"><text
									class="lg text-white cuIcon-hot"></text>1234</view>
							<view class="text-sm text-black padding_le_10 text-cut margin-top-xs">Hello</view>
							<view class="text-sm text-grey padding_le_10 text-cut margin-top-xs">开本场次：11</view> -->
							{{item.role_name}}
						</view>
					</view>
				</scroll-view>
			</view>

			<view class="margin-sm padding-top-sm text-white dm" v-if="ScriptLike.length>0&&allowAppointment==0?false:true">
				<view class="margin-bottom-sm text-center text-bold text-lg">
					猜你喜欢
				</view>
				<scroll-view class="scroll-view_H" scroll-x="true" scroll-left="0">
					<view v-for="(item,index) in ScriptLike" :key="item.id" @click="$goPage('/pageB/script/info?id='+item.id)" class="cu-card dm-item scroll-view-item_H radius">
						<image class="radius"
							:src="$isHttp(item.picture)"
							mode="aspectFill">
						</image>
						<view class=" text-center">
							{{item.name}}
						</view>
					</view>
				</scroll-view>
			</view>
			<view @click="showModal" data-target="bottomModal" class="round padding-xs"
				style="position: fixed;right: 20rpx;bottom: 100rpx;background-color: rgba(0,0,0,0.6);color: #fff;">
				<image style="width: 50rpx;height: 50rpx;" src="../../static/icon/share.png" mode=""></image>
				<view>分享</view>
			</view>
		</view>

		<!-- //图片窗口 -->
		<van-popup :show="show" closeable round @close="hideModal" @click-overlay="hideModal">
			<image :src="preImg" style="width: 420rpx;height: 600rpx;" mode=""></image>
			<view class="cu-bar bg-white">
				<view class="action margin-0 flex-sub  solid-left" @tap="hideModal">与该角色绑定</view>
			</view>
		</van-popup>

		<!-- //底部窗口 -->
		<view class="cu-modal bottom-modal" :class="modalName=='bottomModal'?'show':''">
			<view class="cu-dialog">
				<view class="cu-bar bg-white">
					<view class="action text-green"></view>
					<view class="action text-blue" @tap="hideModal">取消</view>
				</view>
				<view class="padding-xl">

					<button class="btn share_friends" open-type="share">分享好友</button>

					<!-- <button type="">生成海报图</button> -->
				</view>
			</view>
		</view>

	</view>
</template>

<script>
	import data from '../../data.js'
	import { shareMixins} from '@/common/mixins/share.js'
	export default {
		mixins:[shareMixins],
		data() {
			return {
				show:false,
				preImg: '',
				playId: "",
				
				ScriptInfoData: "", //详情数据
				ScriptRole: [], //剧本角色
				ScriptLike:	[],
				
				
				
				isExpand: false, //简介是否展开
				modalName: '',
				playShow: false, //玩过弹框
				score: 0, // 玩过评分

				bgc: '#333',
				bgc1: '#333',
				
				allowAppointment:1, //是否允许预约
			}
		},
		onLoad(option) {
			this.playId = option.id
			this.allowAppointment=option.allowAppointment
			this.$u.api.getScriptInfo({
				userId: this.vuex_user.id?this.vuex_user.id:'',
				playId: option.id,
				storeId:this.vuex_bussinessId
			}).then(res => {
				this.ScriptInfoData = res.data.xiang
				this.ScriptRole = res.data.role
				
				this.ScriptInfoData.picture=this.$isHttp(this.ScriptInfoData.picture)
				this.ScriptInfoData.smallClasses=this.ScriptInfoData.smallClasses.slice(0,5)
			})
			this.$u.api.getScriptLike({
				playId: option.id
			}).then(res=>{
				this.ScriptLike=res.data
			})
		},
		onUnload() {
			this.$u.vuex('ScriptInfo', '');
		},
		methods: {
			getBefore(){
				this.$u.vuex('ScriptInfo', this.ScriptInfoData);
				if(this.vuex_bussinessId!==''){
					this.$goPageIsLoginOk('./BeforeAppointment')
				}else{
					this.$goPageIsLoginOk('./SelectBussiness?id='+this.playId)
				}
			},
			//添加想玩
			async addWantPlay() {
				await this.$login()
				if (this.ScriptInfoData.wantStatus == 0) {
					this.$u.api.addWantPlay({
						userId: this.vuex_user.id,
						playId: this.playId
					}).then(res => {
						this.ScriptInfoData.wantStatus = 1
					})
				} else {
					this.$u.api.delWantPlay({
						playId: this.playId,
						userId: this.vuex_user.id
					}).then(res => {
						this.ScriptInfoData.wantStatus = 0
					})
				}
			},
			//添加玩过
			submitPlayed() {
				this.$u.api.addPlayed({
					userId: this.vuex_user.id,
					playId: this.playId,
					score: this.score * 2
				}).then(res => {
					this.ScriptInfoData.playedStatus = 1
					this.ScriptInfoData.score = this.score * 2
					this.playShow = false
				})
			},
			scoreOnChange(e) {
				this.score = e.detail
			},
			clickOverlay() {
				this.playShow = false
			},
			showModal(e) {
				this.modalName = e.currentTarget.dataset.target
			},
			showModal1(index) {
				this.preImg = this.$isHttp(this.ScriptRole[index].picture)
				this.show = true
			},
			hideModal(e) {
				this.modalName = null
				this.show = false
			},
		}

	}
</script>

<style lang="scss" scoped>
	.expand {
		height: auto;
	}

	.noexpand {
		max-height: 192rpx;
		overflow: hidden;
		text-overflow: ellipsis;
		/*设置隐藏部分为省略号*/
		// overflow: hidden;/*设置隐藏*/
		// display: -webkit-box;
		// -webkit-line-clamp: 2;/*设置显示行数，此处为2行，可设置其他数字*/
		// -webkit-box-orient: vertical;
	}

	// 主持人
	.supporter {
		background-color: #fff;
	}

	.padding_top_5 {
		padding-top: 5rpx;
	}

	.padding_le_10 {
		padding-left: 10rpx;
	}

	.scroll-view_H {
		white-space: nowrap;
		width: 100%;
	}

	.scroll-view-item_H {
		display: inline-block;
	}

	.dm {
		width: auto;

		.dm-item {
			width: 240rpx;
			height: 430rpx;
			// background-color: #fff;
			margin-left: 15rpx;
			overflow: hidden;

			&:nth-child(1) {
				margin-left: 0;
			}

			image {
				width: 100%;
				height: 85%;
			}

			.text {}
		}
	}
</style>
